<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
			font: 16px "华文行楷";/
			/* 去掉无序列表样式，针对一项列表项标记 */
			list-style-t ype: none;
			/* 去掉无序列表样式，针对三项①列表项标记，list-style-type
									   ②列表项为之 list-style-position
									   ③列表项图片 list-style-image
							所有的效果，去掉样式
			 */
			/* list-style: none; */
			text-decoration: none;
			/* 去掉内外边距：ul li存在外边距 */
			margin: 0;
			padding: 0;
			}
			/* div.sidebar{ 
				width: 235px;
				height: 460px;
				background: #aaaaff;
			}
			ul.ul_sidebar li{
				width: 235px;
				height: 46px;
				line-height: 46px;
				text-align: center;
			}
			ul.ul_sidebar li:hover{
				background-color: aqua;
			}
			*/
			aside{
				width: 235px;
				height: 460px;
				background: #aaaaff;
				/* 盒子模型：外边距 */
				margin: 20px 200px ;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 46px;
				line-height: 46px;
				text-align: center;
				/* 挂靠位【固定】 使用相对定位 */
				position: relative;
			}
			aside ul.ul_sidebar li:hover{
				background: #9aacf9;
			}
			/* 挂靠点【活动】使用绝对定位。按照父级位置定位 */
			aside ul.ul_sidebar div.out{
				width: 500px;
				height: 460px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 435px;
				/* 默认隐藏 搞不定【jQuery】 */
				display: block;
			}
			aside ul.ul_sidebar div.out:hover{
				
			}
		</style>
	</head>
	<body>
		<!-- html结构：  外层div .sidebar 
			 html结构标记：aside元素语义化元素，表示：左栏、侧边栏、广告
						  有利于SEO优化
						通常代替div+id/class
			 
					内层ul.ul_sidebar li*10
						  内容参照静定左栏第一个
			css结构：内部引入方式
					通配选择器---合理添加
					外层div .sidebar 235*460 背景色
					内层每个li加宽高235*46
					内层文本垂直居中对其，文字：16px
					鼠标移动上去li，背景色改变
		-->
		<!-- <div class="sidebar"> 
			<ul class="ul_sidebar">
				<li>手机</li>
				<li>电脑</li>
				<li>家居</li>
				<li>男装</li>
				<li>美妆</li>
				<li>女鞋</li>
				<li>男鞋</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
		</div>-->
		<aside>
			<ul class="ul_sidebar">
				<!-- 弹出框，模式：div+别名 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家居</li>
				<li>男装</li>
				<li>美妆</li>
				<li>女鞋</li>
				<li>男鞋</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
			
		</aside>
	</body>
</html>